<template>
  <div class="divBox">
    <div class="selCard mb14">
      <el-form :model="tableFrom" ref="searchForm" inline size="small" label-width="95px">
        <el-form-item label="时间选择：">
          <el-date-picker style="width: 280px;" v-model="timeVal" value-format="yyyy/MM/dd" format="yyyy/MM/dd"
            type="daterange" placement="bottom-end" placeholder="自定义时间" :picker-options="pickerOptions"
            @change="onchangeTime" />
        </el-form-item>
        <el-form-item label="支付方式：" prop="pay_type">
          <el-select v-model="tableFrom.type" clearable placeholder="请选择" class="selWidth" @change="getList(1)">
            <el-option label="微信" value="weixin" />
            <el-option label="支付宝" value="alipay" />
            <el-option label="余额" value="balance" />

          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="tableFrom.status" placeholder="请选择" class="filter-item selWidth" clearable
            @change="getList(1)">
            <el-option label="已完成" value="1" />
            <el-option label="进行中" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名：" prop="keyword">
          <el-input v-model="tableFrom.nickname" @keyup.enter.native="getList(1)" placeholder="请输入用户名称搜索" clearable
            class="selWidth" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
          <el-button size="small" @click="searchReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <el-table v-loading="listLoading" :data="tableData.data" size="small">
        <el-table-column prop="donation_sn" label="订单号" min-width="100" />
        <el-table-column prop="user.nickname" label="用户名" min-width="80" />
        <el-table-column prop="user.phone" label="手机号码" min-width="90" />
        <el-table-column prop="donation_amount" label="捐助金额(元)" min-width="60" />
        <el-table-column prop="type" label="支付方式" min-width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.pay_type == 'balance'?'余额支付':'微信支付'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paid" label="支付状态" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.is_pay? '已支付' : '未支付' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="paid" label="状态" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.status? '已结束' : '进行中' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="start_date" label="捐助日期" min-width="60" />
        <el-table-column prop="end_date" label="结束日期" min-width="60" />
        <el-table-column label="操作" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getDetail(scope.row.uid)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination background :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, prev, pager, next, jumper" :total="tableData.total"
          @current-change="pageChange" />
      </div>
    </el-card>



    <el-drawer :visible.sync="detailDrawer" :size="900" :with-header="false">
      <div class="detail" v-loading="detailLoading">
        <div class="animal">
          <div class="animal-image demo-image__preview">
            <el-image :src="detailData.user.avatar" class="mr5" :preview-src-list="[detailData.user.avatar]" />
          </div>
          <div class="animal-info">
            <ul class="list">
              <li class="item">
                <div class="title">用户ID</div>
                <div>
                  <span>{{detailData.user.uid }}</span>
                </div>
              </li>
              <li class="item">
                <div class="title">用户名称</div>
                <div>
                  <span>{{detailData.user.nickname }}</span>
                </div>
              </li>
              <li class="item">
                <div class="title">用户电话</div>
                <div>
                  <span class="description">{{detailData.user.phone?detailData.user.phone:'-' }}</span>
                </div>
              </li>

              <li class="item">
                <div class="title">月捐总额</div>
                <div>
                  <span>{{detailData.donation_amount }}</span>
                </div>
              </li>

            </ul>
          </div>
        </div>
        <div class="cloud">
          <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="捐助记录" name="logList">
              <el-table :data="tableDataLog.data" size="small" v-loading="logLoading">
                <el-table-column prop="donation_sn" label="捐助编号" min-width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.donation_sn }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="donation_amount" label="捐助金额" min-width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.donation_amount }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="捐助日期" min-width="150">
                  <template slot-scope="scope">
                    <div class="tab">
                      <div class="line1">{{ scope.row.donation_date }}</div>
                    </div>
                  </template>
                </el-table-column>

              </el-table>
              <div class="block">
                <el-pagination :page-size="tableFromLog.limit" :current-page="tableFromLog.page"
                  layout="prev, pager, next, jumper" :total="tableDataLog.total" @size-change="handleSizeChangeLog"
                  @current-change="pageChangeLog" />
              </div>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>


    </el-drawer>
  </div>
</template>

<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------
  import {
    userDonationMonthListApi,
    userDonationMonthLogListApi,
    userDonationMonthInfoListApi
  } from "@/api/user";

  import timeOptions from '@/utils/timeOptions';
  export default {
    name: "monthRecord",

    data() {
      return {
        pickerOptions: timeOptions,
        listLoading: true,
        timeVal: [],
        cardLists: [],
        tableData: {
          data: [],
          total: 0,
        },
        tableFrom: {
          page: 1,
          limit: 10,
          status: '',
          nickname: '',
          type: '',
          date: ''
        },


        activeName: "logList",
        detailDrawer: false,


        logLoading: true,
        tableDataLog: {
          data: [],
          total: 0
        },
        detailData: {
          user: {

          }
        },
        tableFromLog: {
          "uid": "",
          "page": 1,
          "limit": 10
        },
        detailLoading: false
      };
    },
    mounted() {
      this.getList('');

    },
    methods: {
      /**重置 */
      searchReset() {
        this.timeVal = []
        this.tableFrom.date = ""
        this.$refs.searchForm.resetFields()
        this.getList(1)
      },
      // 具体日期
      onchangeTime(e) {
        this.timeVal = e;
        this.tableFrom.date = e ? this.timeVal.join("-") : "";
        this.tableFrom.page = 1;
        this.getList(1);

      },

      // 列表
      getList(num) {
        this.listLoading = true;
        this.tableFrom.page = num ? num : this.tableFrom.page;
        userDonationMonthListApi(this.tableFrom)
          .then((res) => {
            this.tableData.data = res.data.list;
            this.tableData.total = res.data.count;
            this.listLoading = false;
          })
          .catch((res) => {
            this.listLoading = false;
            this.$message.error(res.message);
          });
      },
      pageChange(page) {
        this.tableFrom.page = page;
        this.getList('');
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val;
        this.getList('');
      },


      async getDetail(id) {
        this.dialogVisible = true

        const tab = {
          name: this.activeName
        }

        this.detailDrawer = true;
        await userDonationMonthInfoListApi(id)
          .then((res) => {
            this.detailLoading = false
            this.detailData = res.data;
            // this.replyData.total = res.data.count;
          })
          .catch((res) => {
            this.detailDrawer = false;
            this.$message.error(res.message);
          });

        await this.tabClick(tab)
      },


      tabClick(tab) {
        if (tab.name === 'logList') {
          this.onCloudLog(this.detailData.uid)
        }
      },

      async onCloudLog(uid) {

        this.tableFromLog.uid = uid

        await userDonationMonthLogListApi(this.tableFromLog).then((res) => {
          this.logLoading = false
          this.tableDataLog.data = res.data.list
          this.tableDataLog.total = res.data.count
        });

      },


      pageChangeLog(page) {
        this.tableFromLog.page = page

        this.onCloudLog(this.detailData.uid)
      },
    },
  };
</script>

<style scoped lang="scss">
  .detail {
    display: flex;
    flex-direction: column;
    width: 100%;

    .animal {
      width: 100%;
      padding: 10px;

      .animal-image {
        display: flex;
        flex-direction: row;

        height: 60px;
      }

      .animal-info {
        // display: flex;
        // flex-direction: row;

        // height: 60px;

        .list {
          display: flex;
          margin-top: 20px;
          overflow: hidden;
          list-style: none;
          padding: 0;

          .item {
            flex: none;
            width: 200px;
            font-size: 14px;
            line-height: 14px;
            color: rgba(0, 0, 0, 0.85);

            div {
              text-align: center;
              /* 水平居中 */
            }

            .title {
              margin-bottom: 12px;
              font-size: 13px;
              line-height: 13px;
              color: #666666;

              .description {
                word-wrap: break-word;
                /* 处理长单词换行 */
                overflow-wrap: break-word;
                /* 新版支持 */
                line-height: 1.5;
                /* 设置行间距 */
                margin-bottom: 10px;
                /* 段落之间的间距 */
              }
            }

            .value1 {
              color: #f56022;
            }

            .value2 {
              color: #1bbe6b;
            }

            .value3 {
              color: #437FFD;
            }

            .value4 {
              color: #6a7b9d;
            }

            .value5 {
              color: #f5222d;
            }
          }
        }
      }



    }
  }

  .el-tabs--border-card {
    box-shadow: none;
    border-bottom: none;
  }
</style>
